<!--
下面是调用组件代码：
    <count-down endTime="1490761620" :callback="callback" endText="已经结束了"></count-down> 
    引入上面代码之后 换要在vue的methods里加上callback回调函数 
    ednTime 是时间结束之后的时间戳  callback是结束之后的回调  endText是结束之后的文字显示！
 -->
 
<template>
    <span :endTime="endTime" :callback="callback" :endText="endText" style="margin:0px;padding:0px;">
        <slot>
            {{content}}
        </slot>
    </span>
</template>
<script>
    export default {
      data(){
        return {
          content: '',
          timer:{type:Object},
        };
      },
      props:{
        endTime:{
          type: Number,
          default :''
        },
        endText:{
          type : String,
          default:'已结束'
        },
        callback : {
          type : Function,
          default :''
        }
      },
      mounted () {
        this.GetView();
        this.countdowm(this.endTime);
      },
      watch:{            
        endTime:function(val){
          this.beforeDestroy(); //先删除现有的
          this.GetView();
          this.countdowm(val);
        }
      },
      methods: {
        countdowm(timestamp){
          let self = this;
          let nowTime1 = new Date();
          let endTime1 = new Date(timestamp);
          let t1 = endTime1.getTime() - nowTime1.getTime();
          let day1 = Math.floor(t1/86400000);
          let hour1=Math.floor((t1/3600000)%24);              
          let it=day1>0 ? 1000*60*30 : (hour1>0 ? 1000*60 : 1000);     

          this.timer = setInterval(function(){
            let nowTime = new Date();
            let endTime = new Date(timestamp);
            let t = endTime.getTime() - nowTime.getTime();
            if(t>0){
              let day = Math.floor(t/86400000);
              let hour=Math.floor((t/3600000)%24);
              let min=Math.floor((t/60000)%60);
              let sec=Math.floor((t/1000)%60);
              self.$emit('interval',day,hour,min,sec);
              let format = '';
              if(day > 0){
                format =  `${day}天${hour}小时`;//${min}分${sec}秒`;
              }
              if(day <= 0 && hour > 0 ){
                format = `${hour}小时${min}分`; //${sec}秒;
              }
              if(day <= 0 && hour <= 0){
                format =`${min}分${sec}秒`;                        
              }
              self.content = format;
              // console.log(format);
            } else{
              clearInterval(this.timer);
              self.content = self.endText;
              self._callback();
            }                
          },it);
        },

        _callback(){
          if(this.callback && this.callback instanceof Function){
            this.callback(...this);
          }
        },

        GetView(){
          let nowTime = new Date();
          let endTime = new Date(this.endTime);
          let t = endTime.getTime() - nowTime.getTime();                
          if(t>0){
            let day = Math.floor(t/86400000);
            let hour=Math.floor((t/3600000)%24);
            let min=Math.floor((t/60000)%60);
            let sec=Math.floor((t/1000)%60);
            let format = '';
            if(day > 0){
              format =  `${day}天${hour}小时`;//${min}分${sec}秒`;
            }
            if(day <= 0 && hour > 0 ){
              format = `${hour}小时${min}分`; //${sec}秒;
            }
            if(day <= 0 && hour <= 0){
              format =`${min}分${sec}秒`;
            }
            this.content = format;
          }                
        },

        beforeDestroy() {
          if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
            clearInterval(this.timer); //关闭
          }
        }
  }
};
</script>